<template>
  <vxe-modal
    :show-zoom="true"
    :zIndex='10'
    :title='title'
    ref='modal0'
    :resize='true'
    :showFooter='true'
    :mask-closable='true'
    :lock-scroll='false'
    destroy-on-close
    width='600'
    height='500'
  >
    <template v-slot>
      <!--      <div class='flex-app-continer-inner' style="justify-content: center;align-items: center;">-->
      <!--      </div>-->
      <vxe-checkbox-group v-model="userCustomMenus">
        <vxe-checkbox
          style="width: 100px;height: 30px;text-align: left;line-height: 30px;margin: 5px;"
          v-for="(item,index) in searchMenuOptions"
          :key="item.id"
          :label="item.id"
          :content="item.meta.title">
        </vxe-checkbox>

      </vxe-checkbox-group>
    </template>
    <template v-slot:footer>
      <div style="display:flex;justify-content:end">
        <vxe-button @click='$refs.modal0.close()'>关闭</vxe-button>
        <vxe-button status="primary" @click='checkAll'>全选</vxe-button>
        <vxe-button status="primary" @click='uncheckAll'>取消全选</vxe-button>
        <vxe-button status="primary" @click='addSysUserCustomMenu'>确定</vxe-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
import {postAction} from "@/api/manage.js";

export default {
  name: "SearchMenu",
  data() {
    return {
      userCustomMenus: []
    }
  },
  props: {
    title: {
      type: String,
      default: '自定义快捷入口'
    },
    searchMenuOptions: {
      type: Array,
      default: []
    },
    sysUserCustomMenu: {
      type: Array,
      default: []
    },

  },
  created() {
    this.userCustomMenus = []
    this.sysUserCustomMenu.map((item, index) => {
      this.userCustomMenus.push(item.menuId)
    })
  },
  mounted() {

  },
  methods: {
    checkAll() {
      this.userCustomMenus = []
      this.searchMenuOptions.map((item, index) => {
        this.userCustomMenus.push(item.id)
      })
    },
    uncheckAll() {
      this.userCustomMenus = []
    },
    addSysUserCustomMenu() {
      let that = this

      this.$confirm( `确定要配置快捷入口吗？`,'确认').then(data=>{
                  that.$setLoading(true)
                    let params = {}
                    let ids = []
                    params.menuIdList = that.userCustomMenus
                    postAction('/sys/user/addSysUserCustomMenu', params).then((res) => {
                      that.$setLoading(false)
                      if (res.code === '0') {
                        that.$notification.success({
                          message: '操作成功  。'
                        })
                        that.$refs.modal0.close()
                        that.$emit("querySysUserCustomMenu")
                      } else {
                        that.$notification.error({
                          message: res.message
                        })
                      }
                    }, (err) => {
                      that.$setLoading(false)
                    })
                },err=>{
                })




    },
    open() {
      this.$refs.modal0.open()
      this.userCustomMenus = []
      this.sysUserCustomMenu.map((item, index) => {
        this.userCustomMenus.push(item.menuId)
      })
    }
  }
}
</script>

<style scoped>

</style>